<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作</title>
    <style>
        #myDiv {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="myDiv">程序猿最讨厌的四件事：<br>写注释、写文档……</div>

<script>
    let myDiv = document.getElementById('myDiv');
    // 1.innerText操作div内容
    //获取标签内的文本
    console.log(myDiv.innerText);
    //重置标签内的文本
    //myDiv.innerText = "做核酸";
    //追加内容
    myDiv.innerText += "做核酸队伍好长啊";

    //但这样无法引入标签，如：
    myDiv.innerText += "<br>做核酸队伍好长啊";
    //当成纯文本了。所以就引出下面第二个



    // 2.innerHTML操作div内容，可以识别标签。
    myDiv.innerHTML += "<br>做核酸队伍好长啊";
    // 3.outerHTML操作div
</script>

</body>
</html>